<template>
	<view class="container">
		<view class="back-page" @click="backToPage">
			<uni-icons type="left" :size="30" color="#000"></uni-icons>
		</view>
		
		<view v-for="(item, index) in 3" :key="index" class="bg" :class="['bg'+(index+1), current == index? 'active':'']"></view>
		<view class="top-text">{{ $t(`animal.${images[current].key}.topTxt`) }}</view>
		
		<view class="bottom-des">{{ $t(`animal.${images[current].key}.bootomDes`) }}</view>

		<swiper class="header" previous-margin="18%" next-margin="214rpx" :current="current" @change="changeIndex">
		      <swiper-item v-for="(item, index) in images" :key="index">
		        <view :class=" current === index ? 'slide-image active' : 'slide-image quiet'">
					<image :src="item.imgUrl"></image>
					<view v-if="current == index" class="cricle" :class="['cricle'+(current+1)]"></view>
					<view v-if="current == index" class="name">{{ $t(`animal.${item.key}.name`) }}</view>
				</view>
		    </swiper-item>
		</swiper>
		
		<view class="choose-btn" @click="chooseAnimal">{{ $t('animal.chooseBtn') }}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				images: [
					{
						key: 'otter',
						imgUrl:'/static/img-sq.png',
						topTxt:'Let me use joy to help you drive away the troublesome little monster',
						bootomDes:'The mischievous and clever Mizuse is carefree and carefree. In life, he is a motorcyclist and loves various flowers, especially a thought rose given to him by a friend.',
						name:'Otter'
					},{
						key: 'bee',
						imgUrl:'/static/img-bee.png',
						topTxt:'Illuminate the darkest moments with gentle light',
						bootomDes:'Gentle and heartwarming fireflies, resilient and bright girls. I enjoy drawing and reading novels, and believe that gentle light can heal the world.',
						name:'Zen Firefly'
					},{
						key: 'cat',
						imgUrl:'/static/img-cat.png',
						topTxt:'Give you a big bear hug, warm your heart',
						bootomDes:'A simple and warm cat, optimistic and ambitious, loves food and running. For cats, food and warm hugs can heal all unhappiness.',
						name:'Kopi Cat'
					}
				],
				current:0,
			}
		},
		onLoad(options) {
			if (options.animal == 'bee') {
				this.current = 1
			} else if (options.animal == 'cat') {
				this.current = 2
			}
		},
		methods: {
			changeIndex(e){
				this.current = e.detail.current
			},
			backToPage(){
				uni.navigateTo({
					url: '/pages/index/index'
				})
				
			},
			chooseAnimal() {
				let animal = 'otter'
				if (this.current == 1) {
					animal = 'bee'
				} else if (this.current == 2) {
					animal = 'cat'
				}
				
				uni.navigateTo({
					url: '/pages/index/chat/chat?animal='+animal
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		height: 100vh;
		.back-page{
			position: absolute;
			top: 2rpx;
			left: 20rpx;
			z-index: 999;
		}
		.bg{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			transition: opacity .8s ease-in-out;
		}
		.bg1{
			background: url('/static/select-1.png') top center no-repeat #f9fffd;
			background-size: 100%;
		}
		.bg2{
			background: url('/static/select-2.png') top center no-repeat #f2f9ff;
			background-size: 100%;
		}
		.bg3{
			background: url('/static/select-3.png') top center no-repeat #fdfbef;
			background-size: 100%;
		}
		.bg.active{
			opacity:1;
		}
		.cricle{
			width: 210rpx;
			height: 90rpx;
			border-radius: 50%;
			transform: scaleX(1.5);
			position: absolute;
			left: 34%;
			bottom: 20rpx;
		}
		.cricle1{
			background-color: #CFF5E8;
		}
		.cricle2{
			background-color: #A1D2FF;
		}
		.cricle3{
			background-color: #FAF0CD;
		}
		.top-text{
			position: absolute;
			top: 12vh;
			left: 0;
			width: 100%;
			padding: 0 90rpx;
			text-align: center;
			font-size: 30rpx;
			line-height: 48rpx;
		}
		.name{
			position: absolute;
			left: 40rpx;
			bottom: -70rpx;
			width: 100%;
			text-align: center;
			font-size: 44rpx;
		}
		.bottom-des{
			position: absolute;
			left: 0;
			top: 70vh;
			width: 100%;
			padding: 0 42rpx;
			font-size: 30rpx;
			color: #999;
		}
		.header {
			box-sizing: border-box;
			width: 100%;
			height: 100%;
			padding-top: 32vh;
			.slide-image {
				position: relative;
				image{
					width: 420rpx;
					height: 420rpx;
					position: relative;
					z-index: 2;
				}
			}
		 
			.active { 
				// 中间放大动画
				transform: none;
				transition: all 0.2s ease-in 0s;
			  }
		 
			.quiet {
				// 两边缩小动画
				transform: scale(0.5);
				opacity: 0.4;
				transition: all 0.5s ease-in 0s;
			  }
		}
		.choose-btn{
			position: absolute;
			top: 85%;
			left: 50%;
			transform: translateX(-50%);
			width: 546rpx;
			height: 98rpx;
			line-height: 98rpx;
			text-align: center;
			background-color: #43b6af;
			border-radius: 49rpx;
			font-size: 32rpx;
			color: #fff;
		}
	}
</style>